import { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'
import { useEffect, useRef } from 'react'
import { useDrag } from 'react-dnd'

const Container = ({ id, name, children, styles }: CommonComponentProps) => {

  const { canDrop, drop } = useMaterialDrop(['Button', 'Container', 'Table', 'Form', 'Spin'], id)

  const divRef = useRef<HTMLDivElement>(null)

  const [_, drag] = useDrag({
    type: name,
    item: {
      type: name,
      dragType: 'move',
      id: id,
    }
  })

  useEffect(() => {
    drop(divRef)
    drag(divRef)
  }, [])

  return (
    <div data-component-id={id} ref={divRef} className={`min-h-[100px] p-[20px] ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
      style={styles}>
      {children}
    </div>
  )
}

export default Container